<template>
	<view class="number-page">
		<view class="header-section" :style="{ paddingTop: `calc(${statusBarHeight}px + 30rpx)` }">
			<!-- 返回按钮 -->
			<view class="back-btn" :style="{ top: `calc(${statusBarHeight}px + 30rpx)` }" @click="goBack">
				<u-icon name="arrow-left" color="#FFFFFF" size="44"></u-icon>
			</view>

			<!-- 9Hs信息 -->
			<view class="points-info">
				<view class="points-title">
					<!-- <u-icon name="rmb-circle-fill" color="#FFD700" size="40"></u-icon> -->
					<text>数值订单</text>
				</view>
				<view class="points-value">{{ NumericalOrder.user_number }}</view>
			</view>

			<view class="number-wrap">
				<view class="number-container">
					<view class="info-wrap">
						<view class="info-left">
							<view class="number-icon">
								<image src="/static/images/icon_wineBeans.png" class="icon-md m-r-20"></image>
							</view>
							<view class="left-txt">酒豆兑换</view>
						</view>
						<view class="info-right" @click="handleClickBtn">
							<view class="right-txt">活动说明</view>
							<u-icon name="arrow-right" color="#000" size="32"></u-icon>
						</view>
					</view>
					<view class="btn-box">
						<view class="txt active" @click="handleClickBtn">去赚酒豆</view>
						<view class="line"></view>
						<view class="txt" @click="handleClickBtn">兑换记录</view>
						<view class="line"></view>
						<view class="txt" @click="handleClickBtn">权益劵</view>
					</view>
				</view>
			</view>
		</view>

		<view class="blank-block"></view>

		<!-- 做任务赚金豆 -->
		<view class="task-wrap">
			<view class="task-container">
				<view class="task-title">
					<view>做任务</view>
					<view>.</view>
					<view>赚酒豆</view>
				</view>
				<view class="task-list">
					<!-- 消费推荐 -->
					<view class="task-item">
						<view class="task-left">
							<view class="img-box">
								<image src="/static/images/icon_recommend.png" class="icon-recommend"></image>
							</view>
							<view class="txt-box">
								<view class="recommend-txt">消费推荐</view>
								<view class="icon-wineBeans">
									+10
								</view>
							</view>
						</view>
						<view class="task-right">
							<view class="task-btn" @click="handleClickBtn">去购买</view>
						</view>
					</view>
					<!-- 登录签到 -->
					<view class="task-item">
						<view class="task-left">
							<view class="img-box">
								<image src="/static/images/icon_login.png" class="icon-recommend"></image>
							</view>
							<view class="txt-box">
								<view class="recommend-txt">登录签到</view>
								<view class="icon-wineBeans">
									+5
								</view>
							</view>
						</view>
						<view class="task-right">
							<view class="task-btn" @click="handleClickBtn">去打卡</view>
						</view>
					</view>
					<!-- 观看广告 -->
					<view class="task-item">
						<view class="task-left">
							<view class="img-box">
								<image src="/static/images/icon_view.png" class="icon-recommend"></image>
							</view>
							<view class="txt-box">
								<view class="recommend-txt">观看广告</view>
								<view class="icon-wineBeans">
									+2
								</view>
							</view>
						</view>
						<view class="task-right">
							<view class="task-btn" @click="handleClickBtn">去观看</view>
						</view>
					</view>
					<!-- 论坛种草 -->
					<view class="task-item">
						<view class="task-left">
							<view class="img-box">
								<image src="/static/images/icon_forum.png" class="icon-recommend"></image>
							</view>
							<view class="txt-box">
								<view class="recommend-txt">论坛种草</view>
								<view class="icon-wineBeans">
									+5
								</view>
							</view>
						</view>
						<view class="task-right">
							<view class="task-btn" @click="handleClickBtn">去分享</view>
						</view>
					</view>
					<!-- 门店合作 -->
					<view class="task-item">
						<view class="task-left">
							<view class="img-box">
								<image src="/static/images/icon_cooperation.png" class="icon-recommend"></image>
							</view>
							<view class="txt-box">
								<view class="recommend-txt">推荐门店合作</view>
								<view class="icon-wineBeans">
									+15
								</view>
							</view>
						</view>
						<view class="task-right">
							<view class="task-btn" @click="handleClickBtn">去推荐</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { getWallet, getAccountLog } from "@/api/user";
export default {
	data() {
		return {
			statusBarHeight: 20, // 默认状态栏高度

			NumericalOrder: {
				user_number: '0.00',
			},
		}
	},
	onload() {

	},
	methods: {
    goBack() {
      uni.navigateBack();
    },
		handleClickBtn() {
			uni.showToast({
          title: '系统完善中，敬请期待',
          icon: 'none'
        });
		}
	}
}
</script>
<style lang="scss" scoped>
page {
	background-color: #f5f7fa;
	height: 100%;
	overflow: hidden;
}

.number-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
}

/* 顶部红色背景区域 */
.header-section {
	background: linear-gradient(135deg, #f50d19 0%, #FF6B6B 100%);
	padding: 30rpx;
	padding-bottom: 50rpx;
	position: relative;
	flex-shrink: 0;
	z-index: 10;
	border-bottom-right-radius: 60rpx;
	border-bottom-left-radius: 60rpx;
}

.back-btn {
	position: absolute;
	left: 30rpx;
	z-index: 11;
}

.points-info {
	margin-top: 80rpx;
	padding: 0 20rpx;
	margin-left: 40rpx;
}

.points-title {
	display: flex;
	align-items: center;
	color: #FFFFFF;
	font-size: 32rpx;
	font-weight: 600;
}

.points-value {
	font-size: 60rpx;
	font-weight: 500;
	color: #FFFFFF;
	margin-top: 10rpx;
	margin-bottom: 30rpx;
}

.number-wrap {
	position: relative;
}

.blank-block {
	height: 200rpx;
}

.number-container {
	position: absolute;
	width: 100%;
	height: 224rpx;
	background: #fff;
	border-radius: 30rpx;
	box-shadow: 10rpx 10rpx 20rpx 5rpx rgba(192, 192, 192, 0.6);
}

.info-wrap {
	display: flex;
}

.info-left {
	flex: 1;
}

.info-right {
	flex: 1;
}

.info-left {
	display: inline-flex;
	margin: 30rpx;
}

.info-right {
	margin: 30rpx;
	display: inline-flex;
	justify-content: flex-end;
}

.left-txt,
.right-txt {
	font-size: 34rpx;
}

.right-txt {
	color: #666;
}

.btn-box {
	display: flex;
	justify-content: space-between;
	margin: 30rpx;
	color: #000;
}

.line {
	width: 1rpx;
	background-color: #eee;
	margin: 10rpx 0;
}

.btn-box .txt {
	font-size: 32rpx;
}

.txt.active {
	color: #f4030f;
	font-weight: 600;
}

.task-wrap {
	background-color: #fff;
	margin: 0 32rpx;
	border-radius: 20rpx;
	box-shadow: 10rpx 10rpx 20rpx 5rpx rgba(192, 192, 192, 0.6);

}

.task-container {
	margin: 30rpx;
}

.task-title {
	display: flex;
	align-items: flex-start;
	font-size: 32rpx;
	color: #000;
	font-weight: 600;
}
.task-item {
	margin-top: 52rpx;
	display: flex;
}
.task-left,.task-right {
	flex: 1;
}
.icon-wineBeans {
	width: 96rpx;
	height: 38rpx;
	background-image: url('../../../static/images/icon_wineBeans_1.png');
	background-size: 96rpx 38rpx;
	background-repeat: no-repeat;
	text-align: center;
	margin-top: 10rpx;
	color: #ff9c44;
	font-size: 28rpx;
	padding-left: 30rpx;
	padding-top: 4rpx;
}

.img-box,.txt-box {
	float: left;
}

.icon-recommend {
	width: 78rpx;
	height: 78rpx;
	color: #000;

}

.txt-box {
	margin-left: 26rpx;
}

.recommend-txt {
	font-size: 26rpx;
	font-weight: 600;
}

.task-right {
	display: flex;
 align-content: center;
 justify-content: end;
}

.task-btn {
	width: 145rpx;
	height: 52rpx;
	background: #ffecee;
	border-radius: 40rpx;
	font-size: 26rpx;
	text-align: center;
	line-height: 52rpx;
	color: #f73d47;
}
</style>
